<template>
  <div class="container">
    <div class="top">书架</div>
    <div class="body">
      <div
        class="intro"
        v-for="item in books"
        :key="item.id"
        @click="bookDetailHandler(item.id, item)"
      >
        <img :src="item.src" />
      </div>
      <div class="add" @click="routerClick">
        <img
          class="add_img"
          src="https://img.axureshop.com/26/5a/74/265a746da2364d2cb6895a934c11eec9/images/书架/u184.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //数据源
  data() {
    return {
      books: JSON.parse(localStorage.getItem("bookStore"))
        ? JSON.parse(localStorage.getItem("bookStore"))
        : [],
    };
  },
  methods: {
    //跳转书城页面
    routerClick() {
      this.$router.push("/bookCity");
    },
    //书的详细内容跳转  将这本书的相关数据存入本地存储
    bookDetailHandler(id, item) {
      localStorage.setItem("bookDetail", JSON.stringify(item));
      //通过动态的设置路由参数 进行数详情页面的跳转
      this.$router.push({ name: "bookDetail", params: { id } });
    },
  },
  created() {
    //获取数据的数据
    const data = JSON.parse(localStorage.getItem("bookStore"));
    //将书的数据传递给数据源
    this.books = data.bookshelf;
  },
};
</script>

<style lang="scss" src="./style.scss" scoped></style>